import './index.scss'
import { Col, Row } from "antd";
import ChargeIcon from "@/assets/icons/charge-icon.png";
import React, { useEffect, useState } from "react";
import baoshi from '@/assets/icons/baoshi.png'
import jiantou from '@/assets/icons/jiantou.png'
import { get_user_trade } from '@/utils/mixin.ts'

import jyzl from '@/assets/new/jyzl.png'
import rfhd from '@/assets/new/rfhd.png'
import rfhjl from '@/assets/new/rfhjl.png'

const PersonData = () => {
    const [trade, setTrade] = useState([]); 
        // useEffect 第二个参数为空数组表示仅在组件挂载时执行
        useEffect(() => {
            // 这里是 componentDidMount 的逻辑
            // console.log("Component is mounted");
            // const res = get_platform_trade({currency: 'BNB'})
            
            // 如果有清理逻辑，例如清理定时器，可以在这里添加
            // return () => {
            //   console.log("Component will unmount");
            //   // 清理逻辑
            // };
            const fetchData = async () => {
                try {
    
                    const res1 = await get_user_trade({ email: localStorage.getItem('email') });
                    setTrade(res1.data);
    
                } catch (error) {
                    console.error("Error fetching data:", error);
                }
            };
    
            fetchData(); // 组件挂载时执行一次
    
          }, []);  // 空数组表示只在组件挂载时执行
    return (
        <div className="person-part-pc">
            <Row>
                <Col span={24}>
                    <div className='leftName'>
                        <div className='leftName_Title'>账户</div>
                        <div className='leftName_Top'>
                            <div className='leftName_Image'>
                                <img src={baoshi} className='leftName_Baoshi' />
                                <img src={jiantou} className='leftName_Jiantou' />
                            </div>
                            VIP
                        </div>
                    </div>
                    <div className='mailbox'>{localStorage.getItem('email')}</div>
                    {/* <div className='balanceTitle'>可用余额</div>
                    <div className='balance_amount'> 50000.00 USD </div> */}
                </Col>
                <Col span={24}>
                    <Row className='dataTable' gutter={[0, 40]}>
                        <Col>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={jyzl} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>{trade.length ? trade[0].self_trade_volume : 0.00} BNB</span>
                                    <span className='moneyTitle'>交易总量</span>
                                </div>
                            </div>
                        </Col>
                        <Col>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={rfhd} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>{trade.length ? trade[0].share_points : 0.00}</span>
                                    <span className='moneyTitle'>日分红点</span>
                                </div>
                            </div>
                        </Col>
                        <Col>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={rfhjl} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>{trade.length ? trade[0].share_reward : '0.00'}BNB</span>
                                    <span className='moneyTitle'>日分红奖励</span>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    );
};

export default PersonData;
